
;(function(doc){
    var wfItems = document.getElementsByClassName("wf-item"),
        wfItemInd = wfItems.length,
        _arr = [];

    function init(){
        setImgPro()
    }

    //设置图片的定位
    function setImgPro(){
        var w = (1200 - 40) / 5 + 'px';   //一个元素的宽度
        for(var i=0;i<wfItemInd;i++){
            wfItems[i].style.width = w;

            if(i<5){
                _arr.push(wfItems[i].offsetHeight); //把第一排的元素的高度放到 _arr 中
                wfItems[i].style.top = '0';
                wfItems[i].style.left = i * (parseInt(w) + 10)+'px';
            }else{
                var minInd = arrMinInd(_arr);
                wfItems[i].style.top = _arr[minInd]+10+'px';
                wfItems[i].style.left = minInd * (parseInt(w) + 10)+'px';
                //重新设置arr中的高度
                _arr[minInd]+= (wfItems[i].offsetHeight + 10);
            }
        }
    }

    //获取数组中最小的 ind 坐标
    function arrMinInd(arr){
        var minInd =[].indexOf.call(arr,Math.min.apply(null,arr));
        return minInd
    }

    //因为有图片，加载的时候会闪，所以我们不能直接执行 init
    //现在图片是写在html，看不出来，之后我们动态渲染图片的时候，会有效果
    window.onload = function(){
        init();
    }

})(document);
